<template>
  <view>
    <view>
      <!-- <image
        src="https://tzdj.1qit.com/assets/wx_imgs/logo/logo1.png"
        mode="widthFix"
        class="w-200 logo m-t-300 m-b-150"
      ></image> -->
    </view>
    <view style="j">
      <view style="" class="sys_btn" @click="loginTest" v-show="loginShow">
        <view>
          <view class="wx_login w-700 m-l-25 m-r-25">
            <u-icon
              name="weixin-fill"
              color="#fff"
              size="35"
              class="p-r-20"
            ></u-icon>
            <text class="f-32">微信登录</text>
          </view>
        </view>
      </view>
    </view>
    <button
      class="sys_btn"
      open-type="getPhoneNumber"
      lang="zh_CN"
      @getphonenumber="getPhoneNumber"
      v-show="phoneShow"
    >
      <view class="wx_login w-700 m-r-25">
        <u-icon
          name="phone-fill"
          color="#fff"
          size="35"
          class="p-r-20"
        ></u-icon>
        <text class="f-32">手机授权登录</text>
      </view>
    </button>
    <view class="getAuthorization" v-show="getInfoShow">
      <view class="getAuthorizationBox m-l-25 p-25">
        <view class="getAuthorizationText p-b-25 f-32">访问授权</view>
        <view class="getAuthorizationDesc p-t-50 p-b-50 f-26"
          >您访问的服务，需要授权获取微信信息</view
        >
        <view class="getAuthorizationButtons">
          <view class="buttons1" @click="future">以后再说</view>
          <button
            open-type="getUserInfo"
            lang="zh_CN"
            @getuserinfo="appLoginWx"
            class="buttons2"
          >
            立即授权
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      getInfoShow: false,
      code: "",
      wxInfo: {
        code: "",
      },
      userInfo: {},
      loginShow: true,
      phoneShow: false,
    };
  },
  onLoad(option) {
    console.log("logincode", option);
    this.code = option.code;
  },
  onShow() {
    this.appLoginWx();
  },
  methods: {
    appLoginWx() {
      let _this = this;
      uni.getProvider({
        service: "oauth",
        success: function (res) {
          if (~res.provider.indexOf("weixin")) {
            uni.login({
              provider: "weixin",
              success: (res2) => {
                console.log(res2);
                _this.getInfoShow = false;
                _this.wxInfo.code = res2.code;
              },
              fail: () => {
                uni.showToast({ title: "微信登录授权失败", icon: "none" });
              },
            });
          } else {
            uni.showToast({
              title: "请先安装微信或升级版本",
              icon: "none",
            });
          }
        },
      });
    },
    loginTest() {
      uni.getUserProfile({
        desc: "登录",
        success: (res) => {
          console.log(res);
          let info = res.userInfo;
          this.userInfo = info;
          this.loginShow = !this.loginShow;
          this.phoneShow = !this.phoneShow;
        },
        fail: (res) => {
          uni.showToast({
            title: "拒绝会导致无法登录哦~",
            icon: "none",
          });
        },
      });
    },
    getPhoneNumber(e) {
      console.log(e);
      if (e.detail.errMsg === "getPhoneNumber:ok") {
        let iv = e.detail.iv;
        let encryptedData = e.detail.encryptedData;
        this.getUserInfo(iv, encryptedData);
      } else {
        console.log("拒绝");
        uni.showToast({
          title: "拒绝会导致无法登录哦~",
          icon: "none",
        });
      }
    },
    getUserInfo(iv, encryptedData) {
      uni.request({
        // url: "http://tzdj.1qit.com/api/wx/login",
        url: "http://gxyckf.1qit.com/api/wx/adminlogin",
        data: {
          code: this.wxInfo.code,
          avatar: this.userInfo.avatarUrl,
          nickname: this.userInfo.nickName,
          encryptedData: encryptedData,
          iv: iv,
        },
        method: "POST",
        header: {},
        success: (res) => {
          console.log(res.data);
          if (res.data.code === 1) {
            this.$store.commit("getUserInfo", res.data.data.userinfo);
            uni.setStorage({
              key: "token",
              data: res.data.data.userinfo.token,
              success: function () {
                uni.getStorage({
                  key: "token",
                  success: function (res) {
                    console.log("当前token", res.data);
                  },
                });
              },
            });
            uni.showToast({
              title: "登录成功",
            });
            uni.navigateTo({
              url: "/pages/erp/erp",
            });
          }
        },
      });
    },
    future() {
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>

<style lang="scss">
.getAuthorization {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 750;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  .getAuthorizationBox {
    width: 700rpx;
    background: #fff;
    border-radius: 10rpx;
    color: #333;
    .getAuthorizationText {
      text-align: center;
      border-bottom: 1px solid #f6f6f6;
    }
    .getAuthorizationDesc {
    }
    .getAuthorizationButtons {
      display: flex;
      justify-content: space-around;
      text-align: center;
      .buttons1 {
        line-height: 80rpx;
        width: 200rpx;
        height: 80rpx;
        background: #f5f6f6;
        color: #333;
        font-size: 26rpx !important;
        border-radius: 5rpx;
      }
      .buttons2 {
        line-height: 80rpx;
        width: 200rpx;
        height: 80rpx;
        padding: 0;
        margin: 0;
        display: inline-block;
        font-size: 26rpx !important;
        border: none;
        border-radius: 5rpx;
        background: #001846;
        color: #fff;
      }
    }
  }
}
.logo {
  display: block;
  margin: 0 auto;
}
.wx_login {
  background: #0055fe;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90rpx;
  border-radius: 4rpx;
  //   position: absolute;
  //   left: 0;
  //   top: 0;
  //   bottom: 0;
  //   right: 0;
  //   margin: auto;
}
.desc {
  line-height: 50rpx;
  font-family: "微软雅黑";
}
.color1 {
  color: #858585;
}
.color2 {
  color: #fa3534;
}
.sys_btn {
  border: none;
  background: none;
  color: #fff;
}
</style>
